<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影详情</title>
    <%- include common %>
</head>
<%- include('head',{title:'allcom',username:username })%>
    <div class="container" style="margin-bottom: 60px;">
        <h2 class="text-success">所有的电影评论</h2>

        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3" style="padding-bottom:10px;">
                    <select data-page="<%- page %>" name="" id="myselect" class="form-control">
                    <option value="10" <%- pageSize=='10' ? 'selected':'' %> >每页10条</option>
                    <option value="20" <%- pageSize=='20' ? 'selected':'' %> >每页20条</option>
                    <option value="30" <%- pageSize=='30' ? 'selected':'' %> >每页30条</option>
                </select>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <table class="text-center col-md-12 table table-striped table-bordered table-hover table-condensed">
                        <thead>
                            <tr>
                                <td>序号</td>
                                <td>评论人</td>
                                <td>评论电影</td>
                                <td>评论标题</td>
                                <td>评论内容</td>
                                <td>评论时间</td>
                                <td>操作</td>
                                <td>操作</td>
                            </tr>
                        </thead>
                        <tbody style="width:120px;">
                            <%    if(result.length>0){   %>
                                <%    result.forEach((item,i)=>{   %>
                                    <tr class="<%- item.username == username ?'is_mine':'' %>">
                                        <td>
                                            <%- i+1 %>
                                        </td>
                                        <td class="text-danger h4">

                                            <%- item.username %>

                                        </td>
                                        <td class="text-success ">
                                            <a href="/detail?mid=<%- item.movie.id %>">
                                                <%- item.movie.title  %>
                                            </a>
                                        </td>
                                        <td class="col-md-2">
                                            <p style="width:120px;white-space: normal;word-break:break-all;word-wrap: break-word; ">

                                                <%- item.text  %>

                                            </p>
                                        </td>
                                        <td>
                                            <div style="width:300px;white-space: normal;word-break:break-all;word-wrap: break-word; ">
                                                <%- item.text  %>
                                            </div>
                                        </td>
                                        <td>
                                            <%- item.time  %>
                                        </td>
                                        <td>
                                            <%    if(item.username==username){  %>
                                                <button data-item='<%- JSON.stringify(item) %>' onclick="updateone(this)" data-toggle="modal" data-target="#updatebox" class="btn btn-primary">修改</button>
                                                <%   }   %>
                                        </td>
                                        <td>
                                            <button onclick="deleteone('<%- item._id %>')" data-toggle="modal" data-target="#deletebox" class="btn btn-danger " <%- item.username==username? '': 'disabled' %>  >删除</button>
                                        </td>
                                    </tr>
                                    <%   })   %>
                                        <tr>
                                            <td colspan="8">
                                                <nav aria-label="Page navigation">
                                                    <ul class="pagination">
                                                        <li class="<%- page-1<1 ? 'disabled':'' %>">
                                                            <a href="/allcom?page=<%- page-1 %>&pageSize=<%- pageSize %>" aria-label="Previous">
                                                                <span aria-hidden="true">&laquo;</span>
                                                            </a>
                                                        </li>
                                                        <%  if(page - 2 >= 1){  %>
                                                            <li>
                                                                <a href="/allcom?page=<%- page-2 %>&pageSize=<%- pageSize %>">
                                                                    <%- page - 2 %>
                                                                </a>
                                                            </li>
                                                            <%   }  %>

                                                                <%  if(page - 1 >= 1){  %>
                                                                    <li>
                                                                        <a href="/allcom?page=<%- page-1 %>&pageSize=<%- pageSize %>">
                                                                            <%- page - 1 %>
                                                                        </a>
                                                                    </li>
                                                                    <%   }  %>

                                                                        <li class="active">
                                                                            <a href="/allcom?page=<%- page %>&pageSize=<%- pageSize %>">
                                                                                <%- page %>
                                                                            </a>
                                                                        </li>
                                                                        <%  if(page + 1 <= totalPage ){  %>
                                                                            <li>
                                                                                <a href="/allcom?page=<%- page+1  %>&pageSize=<%- pageSize %>">
                                                                                    <%- page + 1 %>
                                                                                </a>
                                                                            </li>
                                                                            <%   }  %>
                                                                                <%  if(page + 2 <= totalPage ){  %>
                                                                                    <li>
                                                                                        <a href="/allcom?page=<%- page+2   %>&pageSize=<%- pageSize %>">
                                                                                            <%- page + 2 %>
                                                                                        </a>
                                                                                    </li>
                                                                                    <%   }  %>
                                                                                        <li class="<%- page+1>totalPage ? 'disabled':'' %>">
                                                                                            <a href="/allcom?page=<%- page+1  %>&pageSize=<%- pageSize %>" aria-label="Next">
                                                                                                <span aria-hidden="true">&raquo;</span>
                                                                                            </a>
                                                                                        </li>
                                                    </ul>
                                                </nav>
                                                <p>
                                                    <span>
                                                第 <%- page %> 页 / 共 <%- totalPage%>  页
                                            </span>
                                                    <span>
                                                每页 <%- pageSize%> 条  / 共 <%- total %> 条数据
                                            </span>
                                                </p>
                                            </td>
                                        </tr>
                                        <%    }else{  %>
                                            <tr>
                                                <td colspan="8">
                                                    <p class="text-center text-danger h5">暂无数据,请去插入数据评论</p>
                                                </td>
                                            </tr>
                                            <%    }   %>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" tabindex="-1" role="dialog" id="deletebox">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">删除提示</h4>
                </div>
                <div class="modal-body">
                    <p class="text-danger">你真的确定要删除这条评论吗?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" onclick="confirmDel()">确定删除</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <div class="modal fade" tabindex="-1" role="dialog" id="updatebox">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">修改评论</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="title">标题</label>
                            <input type="text" name="title" class="form-control" id="title" placeholder="Title">
                        </div>
                        <div class="form-group">
                            <label for="content">内容</label>
                            <textarea class="form-control" name="content" id="content" cols="30" rows="10" placeholder="Content"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" onclick="confirmUpdate()">确定修改</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <%- include foot %>
        <script>
            $("#myselect").on("change", function() {
                var pageSize = $(this).val()
                var page = $(this).attr('data-page');
                console.log(page, pageSize)
                location.href = `/allcom?page=${page}&pageSize=${pageSize}`
            })

            var delid = null;
            var itemone = null;

            function deleteone(_id) {
                delid = _id; // 内部修改  
            }

            function confirmDel() {
                $.ajax({
                    url: "/removeone",
                    type: "get",
                    data: {
                        _id: delid
                    },
                    success: res => {
                        if (res.code == 200) {
                            $("#deletebox").modal('toggle')
                            window.location.reload()
                        }
                    }
                })
            }

            function updateone(that) {
                // console.log(id, title, content);
                console.log()
                itemone = JSON.parse($(that).attr('data-item'))
                $("#title").val(itemone.title)
                $("#content").val(itemone.content)
            }

            function confirmUpdate() {
                $.ajax({
                    url: "/updateone",
                    type: "POST",
                    data: {
                        _id: itemone._id,
                        content: $("#content").val()
                    },
                    success: res => {
                        if (res.code == 200) {
                            $("#updatebox").modal('toggle')
                            window.location.reload()
                        }
                    }
                })
            }
        </script>

        <style>
            td {
                overflow: hidden;
            }
        </style>